<template>
	<view class="search-container">
		<view class="search">
			<uv-search
				v-model="key"
				:showAction="!showJobList"
				actionText="搜索"
				placeholder="搜索岗位或关键词"
				:actionStyle="{ color: '#fff', fontSize: '30rpx' }"
				bgColor="#fff"
				@clear="handleClearSearch"
				@change="handleChangeInput"
				@custom="handleSearch"
				@search="handleSearch"
			></uv-search>
		</view>

		<!-- 历史搜索 -->
		<view class="history" v-show="false"></view>

		<!-- 热门搜索 -->
		<view class="hot" v-show="false"></view>

		<!-- 职位列表 -->
		<view class="position-list" v-show="positionList.length && !showJobList">
			<view class="list-item" v-for="item in positionList" :key="item.id" @click="handleSearchOne(item)">
				<text class="yzb yzb-search"></text>
				<text>{{ item.name }}</text>
			</view>
		</view>

		<!-- 岗位列表 -->
		<view class="job-list-container" v-if="showJobList">
			<!-- 搜索条件 -->
			<view class="condition">
				<view class="drop-down">
					<!-- 薪资范围 -->
					<view class="drop-down-item">
						<picker mode="selector" :range="range" @change="handleSelectSalary">
							<view class="wrap">
								<text>{{ salaty }}</text>
								<uv-icon name="arrow-down-fill"></uv-icon>
							</view>
						</picker>
					</view>
					<!-- 工作地址 -->
					<view class="drop-down-item">
						<picker mode="region" @change="handleSelectAddress">
							<view class="wrap">
								<text>{{ address }}</text>
								<uv-icon name="arrow-down-fill"></uv-icon>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<job-list :list="jobList"></job-list>
			<!-- <view class="load-more-box" v-if="jobList.length > 0">
				<uv-load-more :status="status" :loadmoreText="loadmoreText" />
			</view> -->
		</view>

		<!-- 查找不到数据 -->
		<view class="empty" v-show="showEmpty"><uv-empty mode="search" text="搜索内容为空"></uv-empty></view>
	</view>
</template>

<script>
import JobList from '@/components/JobList.vue';
import { searchPosition, searchJob } from '@/apis/job/index.js';

export default {
	components: { JobList },
	data() {
		return {
			range: ['全部', '1-3K', '3-5K', '5-8K', '8-12K', '12-15K', '15-20K', '20K以上'],
			ids: [], // 需要搜索职位的id
			key: '', // 搜索关键字
			salaty: '薪资范围', // 薪资范围
			address: '工作地址', // 地址
			positionList: [], // 职位列表
			jobList: [], // 岗位列表
			showEmpty: false, // 显示空状态
			showJobList: false // 显示岗位列表
		};
	},
	onLoad(option) {
		if (option.name && option.id) {
			this.handleSearchOne(option);
		}
	},
	methods: {
		// 选择地址
		handleSelectAddress(e) {
			this.address = e.detail.value[e.detail.value.length - 1];
			this.showEmpty = true;
			this.jobList = [];
			this.positionList = [];
		},
		// 清空搜索内容
		handleClearSearch() {
			this.positionList = [];
			this.jobList = [];
			this.showJobList = false;
			this.showEmpty = false;
		},
		// 输入内容触发
		async handleChangeInput(name) {
			if (name) {
				const res = await searchPosition({ name });
				if (res.code === 200) {
					this.showEmpty = false;
					this.positionList = res.data;
				}
			} else {
				this.handleClearSearch();
			}
		},
		// 根据薪资查询职位
		handleSelectSalary(e) {
			this.salaty = this.range[parseInt(e.detail.value)];
			this.search(this.range[parseInt(e.detail.value)]);
		},
		// 查询某个职位
		async handleSearchOne(row) {
			this.key = row.name;
			this.ids = [row.id];
			this.search();
		},
		// 查询全部职位
		async handleSearch(name) {
			if (!name) {
				uni.showToast({ icon: 'none', title: '请输入搜索内容' });
			} else if (this.positionList.length <= 0) {
				this.showEmpty = true;
				return false;
			} else {
				const ids = this.positionList.map(item => item.id);
				this.ids = ids;
				this.search();
			}
		},
		// 搜索
		async search(salary = '全部') {
			const res = await searchJob({ ids: this.ids, salary });
			if (res.code === 200) {
				this.jobList = res.data;
				this.showJobList = true;
				this.showEmpty = !Boolean(res.data.length);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	// background: #fff;
}
</style>

<style lang="scss" scoped>
.search-container {
	position: relative;
	width: 100%;
	height: 100vh;
	.search {
		position: fixed;
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: $main-color;
	}
	.condition {
		margin-bottom: 20rpx;
		background-color: #fff;
		.drop-down {
			display: flex;
			padding: 0 30rpx;
			.drop-down-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 80rpx;
				margin-right: 30rpx;
			}
			.wrap {
				display: flex;
				align-items: center;
			}
		}
	}

	.position-list {
		width: 100%;
		height: 100vh;
		padding-top: 108rpx;
		background: #fff;
		.list-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
			padding: 0 30rpx;
			color: #303133;
			border-bottom: 1rpx solid #e4e7ed;
			.yzb {
				margin-right: 20rpx;
				color: #c4c6c9;
			}
		}
	}
	.job-list-container {
		padding-top: 108rpx;
	}
	.empty {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>
